import React, { useEffect, useState } from 'react';
import { Menu } from 'antd';
import { useNavigate } from 'umi';
import { menuData } from '../../../../config/routes';

const Menus: React.FC = () => {
  const [current, setCurrent] = useState('');
  const navigate = useNavigate();
  const key = location.pathname.split('/')[1];

  //点击跳转对应路由页面
  const onClick = (e: any) => {
    setCurrent(e.key);
    navigate(e.key);
  };
  useEffect(() => {
    if (key) {
      setCurrent(key);
    }
  }, []);

  return (
    <>
      <Menu
        mode='inline'
        theme='dark'
        defaultSelectedKeys={[current]}
        onClick={onClick}
        style={{ width: '100%', height: '100%' }}
        selectedKeys={[current]}
        items={menuData}
      />
    </>
  );
};

export default Menus;
